<template>
    <div class="container" style="width:99%;margin-top:-25px;">
	<!-- 查询条件 -->
    <div class="query-box">
        <el-from :model="queryBox">
            <el-row>
                <div class="depart-box">
                  <div class="slect-title">客户类型</div>
                  <el-select v-model="queryBox.Value" filterable>
                      <el-option
                          v-for="item in queryBox.options"
                          :key="item.key"
                          :label="item.value"
                          :value="item.key">
                      </el-option>
                  </el-select>
                </div>
                <div class="depart-box">
                  <div class="slect-title">客户来源</div>
                  <el-select filterable v-model="queryBox.Value" filterable>
                      <el-option
                          v-for="item in queryBox.options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                  </el-select>
                </div>
                <div class="depart-box">
                  <div class="slect-title">获取方式</div>
                  <el-select v-model="queryBox.Value" filterable>
                      <el-option
                          v-for="item in queryBox.options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                          >
                      </el-option>
                  </el-select>
                </div>
                <div class="depart-box">
                  <div class="slect-title">客户进展</div>
                  <el-select v-model="queryBox.Value" filterable>
                      <el-option
                          v-for="item in queryBox.options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                  </el-select>
                </div>
                <div class="depart-box">
                  <div class="slect-title">未跟进</div>
                  <el-select v-model="queryBox.Value" filterable>
                      <el-option
                          v-for="item in queryBox.options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                  </el-select>
                </div>
            </el-row>
            <el-row>
                <div class="depart-box">
                  <el-input v-model="queryBox.name" placeholder="请输入联系电话">
                      <template slot="prepend">客户编号</template>
                  </el-input>
                </div>
                <div class="depart-box">
                  <el-input v-model="queryBox.name" placeholder="意向客户">
                      <template slot="prepend">意向客户</template>
                  </el-input>
                </div>
               <div class="depart-box">
                  <div class="slect-title">所在地区</div>
                  <el-select v-model="queryBox.Value" filterable>
                      <el-option
                          v-for="item in queryBox.options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                  </el-select>
                </div>
               <div class="depart-box">
                  <el-input v-model="queryBox.name" placeholder="请输入真实姓名">
                      <template slot="prepend">所属销售人员</template>
                  </el-input>
               </div>
            </el-row>
            <el-row>
              <div class="depart-date">
                  <div class="slect-title">创建时间</div>
                  <el-date-picker
                    v-model="queryBox.DateTime"
                    type="daterange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :default-time="['00:00:00', '23:59:59']">
                  </el-date-picker>
                </div>
            </el-row>
        </el-from>
        <div class="from-btns">
            <kt-button :label="$t('action.reset')" perms="unresourcedivision:xuecoo:reset" type="primary"  />
            <kt-button :label="$t('action.search')" perms="unresourcedivision:xuecoo:search" type="primary"  />
        </div>
    </div>
  <!-- 批量删除按钮 -->
  <div class="add-btns">
    <kt-button :label="$t('action.batchdistribution')" perms="unresourcedivision:xuecoo:batchdistribution" type="primary" />
   <kt-button :label="$t('action.batchDelete')" perms="unresourcedivision:xuecoo:batchDelete" :size="size" type="danger" @click="handleBatchDelete()" 
        :disabled="this.selections.length===0" style="float:left;" v-if="showBatchDelete & showOperation"/>
  </div>
  <div class="fr">
    <kt-button :label="$t('action.download-tmpl')" type="primary" perms="unresourcedivision:xuecoo:download-tmpl"></kt-button>
    <kt-button  :label="$t('action.batchimport')" type="primary" perms="unresourcedivision:xuecoo:batchimport"></kt-button>
    <kt-button :label="$t('action.add-user')" type="primary" perms="unresourcedivision:xuecoo:add-user"></kt-button>
  </div>
	<!--表格内容栏-->
	<CrmTable class="table-width" unResourceDivisionxuecoo permsEdit="sys:user:edit" permsDelete="sys:user:delete"
		:data="pageResult" :columns="columns"
		@findPage="findPage" @handleEdit="handleEdit" @handleDelete="handleDelete">
	</CrmTable>
  
	<!--新增编辑界面-->
	<el-dialog :title="operation?'新增':'编辑'" width="40%" :visible.sync="dialogVisible" :close-on-click-modal="false">
		<el-form :model="dataForm" label-width="80px" :rules="dataFormRules" ref="dataForm" :size="size"
			label-position="right">
			<el-form-item label="ID" prop="id" v-if="false">
				<el-input v-model="dataForm.id" :disabled="true" auto-complete="off"></el-input>
			</el-form-item>
			<el-form-item label="用户名" prop="name">
				<el-input v-model="dataForm.name" auto-complete="off"></el-input>
			</el-form-item>
			<el-form-item label="密码" prop="password">
				<el-input v-model="dataForm.password" type="password" auto-complete="off"></el-input>
			</el-form-item>
			<el-form-item label="机构" prop="deptName">
				<popup-tree-input 
					:data="deptData" 
					:props="deptTreeProps" 
					:prop="dataForm.deptName" 
					:nodeKey="''+dataForm.deptId" 
					:currentChangeHandle="deptTreeCurrentChangeHandle">
				</popup-tree-input>
			</el-form-item>
			<el-form-item label="邮箱" prop="email">
				<el-input v-model="dataForm.email" auto-complete="off"></el-input>
			</el-form-item>
			<el-form-item label="手机" prop="mobile">
				<el-input v-model="dataForm.mobile" auto-complete="off"></el-input>
			</el-form-item>
			<el-form-item label="角色" prop="userRoles" v-if="!operation">
				<el-select v-model="dataForm.userRoles" multiple placeholder="请选择"
					@handleOptionClick="handleOptionClick">
					<el-option v-for="item in roles" :key="item.id"
						:label="item.remark" :value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button :size="size" @click.native="dialogVisible = false">{{$t('action.cancel')}}</el-button>
			<el-button :size="size" type="primary" @click.native="submitForm" :loading="editLoading">{{$t('action.submit')}}</el-button>
		</div>
	</el-dialog>
  </div>
</template>
<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import KtButton from "@/views/Core/KtButton";
import CrmTable from "@/views/Core/CrmTable";
import CrmSwitch from "@/views/Core/CrmSwitch";
import axios from 'axios'
export default {
  name: "Xuecoo",
  components: {
    PopupTreeInput,
    CrmTable,
    KtButton,
    CrmSwitch
  },
  data() {
    return {
      size: "small",
      filters: {
        name: ""
      },
      // 查询条件
      queryBox: {
        name: "",
        options: [
          {
            value: 1,
            lable: "1"
          },
          {
            value: 2,
            lable: "2"
          }
        ],
        Value: "",
        DateTime:''
      },
      columns: [
         { prop: "id", label: "ID", minWidth: 50 },
        { prop: "usernumber", label: "客户编号", minWidth: 80 },
        { prop: "name", label: "意向客户", minWidth: 80 },
        { prop: "realname", label: "客户来源", minWidth: 80 },
        { prop: "firstDepartment", label: "获取方式", minWidth: 100 },
        { prop: "twoDepartment", label: "客户类型", minWidth: 100 },
        { prop: "threeDepartment", label: "客户进展", minWidth: 100 },
        { prop: "position", label: "所在地区", minWidth: 70 },
        { prop: "role", label: "销售人员", minWidth: 70 },
        { prop: "phone", label: "创建时间", minWidth: 190 },
        { prop: "email", label: "最新跟进时间", minWidth: 100 },
      ],
      pageRequest: { pageNum: 1, pageSize: 8 },
      pageResult: {},

      operation: false, // true:新增, false:编辑
      dialogVisible: false, // 新增编辑界面是否显示
      editLoading: false,
      dataFormRules: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }]
      },
      // 新增编辑界面数据
      dataForm: {
        id: 0,
        name: "",
        password: "123456",
        deptId: 1,
        deptName: "",
        email: "test@qq.com",
        mobile: "13889700023",
        status: 1,
        userRoles: []
      },
      deptData: [],
      deptTreeProps: {
        label: "name",
        children: "children"
      },
      roles: []
    };
  },
  methods: {
    // 获取分页数据
    findPage: function(data) {
      if (data !== null) {
        this.pageRequest = data.pageRequest;
      }
      this.pageRequest.columnFilters = {
        name: { name: "name", value: this.filters.name }
      };
      this.$api.user
        .findPage(this.pageRequest)
        .then(res => {
          this.pageResult = res.data;
          this.findUserRoles();
        })
        .then(data != null ? data.callback : "");
    },
    // 加载用户角色信息
    findUserRoles: function() {
      this.$api.role.findAll().then(res => {
        // 加载角色集合
        this.roles = res.data;
      });
    },
    // 批量删除
    handleDelete: function(data) {
      this.$api.user
        .batchDelete(data.params)
        .then(data != null ? data.callback : "");
    },
    // 显示新增界面
    handleAdd: function() {
      this.dialogVisible = true;
      this.operation = true;
      this.dataForm = {
        id: 0,
        name: "",
        password: "",
        deptId: 1,
        deptName: "",
        email: "test@qq.com",
        mobile: "13889700023",
        status: 1,
        userRoles: []
      };
    },
    // 显示编辑界面
    handleEdit: function(params) {
      this.dialogVisible = true;
      this.operation = false;
      this.dataForm = Object.assign({}, params.row);
      let userRoles = [];
      for (let i = 0, len = params.row.userRoles.length; i < len; i++) {
        userRoles.push(params.row.userRoles[i].roleId);
      }
      this.dataForm.userRoles = userRoles;
    },
    // 编辑
    submitForm: function() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            this.editLoading = true;
            let params = Object.assign({}, this.dataForm);
            let userRoles = [];
            for (let i = 0, len = params.userRoles.length; i < len; i++) {
              let userRole = {
                userId: params.id,
                roleId: params.userRoles[i]
              };
              userRoles.push(userRole);
            }
            params.userRoles = userRoles;
            this.$api.user.save(params).then(res => {
              this.editLoading = false;
              if (res.code == 200) {
                this.$message({ message: "操作成功", type: "success" });
                this.dialogVisible = false;
                this.$refs["dataForm"].resetFields();
              } else {
                this.$message({
                  message: "操作失败, " + res.msg,
                  type: "error"
                });
              }
              this.findPage(null);
            });
          });
        }
      });
    },
    // 获取部门列表
    findDeptTree: function() {
      this.$api.dept.findDeptTree().then(res => {
        this.deptData = res.data;
      });
    },
    // 菜单树选中
    deptTreeCurrentChangeHandle(data, node) {
      this.dataForm.deptId = data.id;
      this.dataForm.deptName = data.name;
    },
    // 菜单树选中
    handleOptionClick() {},
    // 导出
  },
  mounted() {
    this.findDeptTree();
  }
};
</script>
<style lang='scss' scoped>
.query-box {
  overflow: hidden;
  width: 98%;
  margin: 0 auto;
}
.depart-date{
   display: flex;
  flex-direction: row;
}
.depart-box {
  width: 20%;
  float: left;
  display: flex;
  flex-direction: row;
  .slect-title {
    width: 28%;
    padding: 0 5%;
    float: left;
  }
  .el-input {
    width: 90%;
  }
  .el-select {
    width: 50%;
  }
  .el-range-editor.el-input__inner{
    width: 100%;
  }
}
.fr{
  float:right;
}
.slect-title {
  background-color: #f5f7fa;
  color: #909399;
  vertical-align: middle;
  display: table-cell;
  position: relative;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  width: 80px;
  line-height: 37px;
  white-space: nowrap;
  font-size: 14px;
  display: inline-table;
  margin-right: -1%;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin-left: 2%;
}
.slect-title-no {
  margin-left: 1%;
}
.el-row {
  margin-top: 20px;
}
.query-box .el-input,
.query-box .el-select {
  margin-left: 1%;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.slect-title {
  float: left;
}
.from-btns {
  clear: both;
  margin: 30px 0;
}
</style>
<style>
.table-width .el-table_1_column_13 .cell {
  width: 100%;
}
.table-width .el-switch__label.is-active {
  color: #ccc;
}
.add-btns {
  display: flex;
  flex-direction: row;
  margin-bottom: 2%;
  margin-left: 1%; 
  float: left;
}
.depart-date .slect-title {
  margin-left: 0px;
  width: 8.4%
}
</style>


